<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-t-n-xs m-b-n-xs" style="border-radius:5px;">

      <div class="panel panel-default" style="margin-bottom:-5px;border-radius:5px">
        <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
          <div class="row">
            <div class="col-xs-3 m-t-xs m-t-sm">
              <span>设备监控</span>
              <i class="fa fa-angle-right"></i>
              <span>自定义监控</span>
              <i class="fa fa-angle-right"></i>
              <span>关注设备列表</span>
            </div>
            <div class="col-xs-9" >
              <form class="form-inline row pull-right">
                <app-select (search)="oo=$event;getData()"></app-select>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="wrapper-sm" >
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body" >
        <div>
          <table  class="table table-hover table-striped m-b-none default footable " style="font-size: 12px;">
            <thead>
            <tr>
              <th style="width:3%"></th>
              <th  style="width:15%">型号</th>
              <th  style="width:10%">设备别名</th>
              <th  style="width:10%">空压机序号</th>
              <th  style="width:10%">设备自定义名称</th>
              <th  style="width:10%">设备所在组</th>
              <th  style="width:15%">终端用户</th>
              <th  style="width:10%">状况</th>
              <th style="width:7%">关注状态</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let aaData of data">
              <td>
                <input type="checkbox" (click)="fn($event,aaData.id,aaData)" id="{{aaData.id}}"/>
              </td>
              <td>
                <a [routerLink]="['../../../../../access/'+aaData.monitor_path.split('(')[0].split('.')[1],aaData.id]" target="_blank">
                  <span style="color: blue">{{aaData.model}}</span>
                </a>
              </td>
              <td>{{aaData.alias_name}}</td>
              <td>{{aaData.sn}}</td>
              <td>{{aaData.xcxlh}}</td>
              <td>{{aaData.group_name}}</td>
              <td>{{aaData.zdyh}}</td>
              <!-- <td><span class="label bg-success inline m-t-xs">在线</span></td> -->
              <td *ngIf="aaData.online=='在线'"><span  class="label bg-success inline m-t-xs">{{aaData.online}}</span></td>
              <td *ngIf="aaData.online=='离线'"><span class="label bg-danger inline m-t-xs">{{aaData.online}}</span></td>
              <td *ngIf="aaData.guanzhu==0"><span><i class="fa fa-star fa-lg" style="color:#999"></i></span></td>
              <td *ngIf="aaData.guanzhu==1"><span><i class="fa fa-star fa-lg" style="color:#f08300"></i></span></td>
            </tr>
            </tbody>
          </table>
        </div>

        <div class="pull-left m-t-md" >
          <button class="btn btn-sm monitor-btn" (click)="cancelFollow()">取消关注</button>
          <button class="btn btn-sm monitor-btn1" *ngIf="items.length===0" data-toggle="tooltip" data-placement="top" title="请先选则需对比的设备">对比数据查询</button> 
          <button class="btn btn-sm monitor-btn1"(click)="compare()" *ngIf="items.length!==0">对比数据查询</button>
        </div>

        <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event;getData()"></app-pagination>




        <a class="btn no-shadow navbar-btn float-a  {{asideFolded ? 'fix-a' : ''}}" (click)="asideFolded = !asideFolded">
          <i class="fa {{asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw" style="color:green"></i>
        </a>
        <div class="float-box" *ngIf="asideFolded">

          <h4>已勾选的需对比设备:<span  *ngIf="items.length==0">没有</span></h4>
          <table  *ngIf="items.length>0" class="table table-hover table-striped m-b-none default footable " style="font-size: 12px;">
            <thead>
            <tr>
              <th>设备ID</th>
              <th>设备别名</th>
              <th>空压机序列号</th>
              <th>设备自定义名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let aaData of items">
              <td>{{aaData.mac}}</td>
              <td>{{aaData.alias_name}}</td>
              <td>{{aaData.sn}}</td>
              <td>{{aaData.xcxlh}}</td>
              <td>
                <a (click)="removeItem(aaData)" >
                  <span class="label bg-danger inline m-t-xs">移除</span>
                </a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>


</div>
